import React, { useState } from "react";
import { Tree } from "antd";
import styles from "./codePreviewTree.module.scss"
import TemplateIndex from "./TemplateIndex";
const { DirectoryTree } = Tree;
const CodePreview = ({ codeObj, ...props }) => {
    const [str, setStr] = useState("")
    const options = [
        {
            title: "page",
            key: "page",
            children: [
                {
                    title: "index",
                    key: "index",
                    isLeaf: true
                },
                {
                    title: "editForm",
                    key: "editForm",
                    isLeaf: true
                },
                {
                    title: "config",
                    key: "config",
                    children: [
                        {
                            title: "actionPanel",
                            key: "config-actionPanel",
                            isLeaf: true
                        },
                        {
                            title: "searchPanel",
                            key: "config-searchPanel",
                            isLeaf: true
                        },
                        {
                            title: "columns",
                            key: "config-columns",

                            isLeaf: true
                        },
                        {
                            title: "index",
                            key: "config-index",
                            isLeaf: true
                        },

                    ]
                }
            ]
        },
        {
            title: "api",
            key: "api-dir",
            children: [
                {
                    title: "api",
                    key: "api",
                    isLeaf: true
                }
            ]
        },
        {
            title: "nodejs",
            key: "nodejs",
            children: [
                {
                    title: "mode",
                    key: "mode",
                    isLeaf: true
                },
                {
                    title: "controller",
                    key: "controller",
                    isLeaf: true
                },
                {
                    title: "router",
                    key: "router",
                    isLeaf: true
                }
            ]
        }
    ]

    const onActiveChange = (value, options, key) => {
        console.log(value, options, key)
    }

    const onSelect = (keys, info) => {
        console.log('Trigger Select', keys, info);
        const { key } = info?.node
        switch (key) {
            case "index": setStr(codeObj.page.index); break;
            case "editForm": setStr(codeObj.page.editForm); break;
            case "api": setStr(codeObj.api.api); break;
            case "config-actionPanel": setStr(codeObj.page.config.actionPanel); break;
            case "config-searchPanel": setStr(codeObj.page.config.searchPanel); break;
            case "config-columns": setStr(codeObj.page.config.columns); break;
            case "config-index": setStr(codeObj.page.config.index); break;
            default: setStr(null);
        }
    };
    return (
        <div className={styles.style}>
            <div className="left">
                <DirectoryTree
                    treeData={options}
                    multiple={false}
                    onSelect={onSelect}
                    onActiveChange={onActiveChange}
                />
            </div>
            <div className="right">
                <TemplateIndex code={str} />
            </div>
        </div>
    )
}
export default CodePreview;